import React, { forwardRef } from 'react';
import CloseIcon from '@mui/icons-material/Close';

const PortalCloseButton = forwardRef(({ 
  onClick = () => {}, 
  id = "close-button",
  className = "",
  darkMode = false,
  ...props 
}, ref) => {
  
  const handleClick = (e) => {
    onClick();
  };
  
  return (
    <div 
      className={`close-button-container ${className}`} 
      ref={ref}
      onClick={handleClick}
      {...props}
    >
      <label 
        className={`close-label ${darkMode ? 'close-dark-mode' : ''}`}
        htmlFor={id}
      >
        <CloseIcon 
          style={{ 
            width: '24px', 
            height: '24px',
            filter: darkMode 
              ? 'drop-shadow(1px 1px 3px #000203)' 
              : 'drop-shadow(1px 1px 3px #dfe3ee)',
            opacity: 0.8
          }} 
        />
      </label>
      
      <style jsx>{`
        /* Close Button Container */
        .close-button-container {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: relative;
          padding: 0;
        }
        
        /* Hidden checkbox for state */
        .close-checkbox {
          display: none;
        }
        
        /* 1. Base shared properties for both modes */
        .close-label,
        .close-label.close-dark-mode {
          position: relative;
          cursor: pointer;
          float: right;
          padding: 10px;
          border: 0px solid #ffffff;
          touch-action: manipulation;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          box-sizing: content-box;
        }
        
        /* 2. Light mode specific overrides */
        .close-label {
          background: linear-gradient(145deg, #ffffff, #dfe3ee);
          box-shadow: 0px 1px 10px 2px #ffffff, 0px 0px 10px 4px #dfe3ee;
        }
        
        /* 3. Dark mode specific overrides */
        .close-label.close-dark-mode {
          background: linear-gradient(145deg, #212121, #000203);
          box-shadow: 0px 1px 5px 2px #212121, 0px 0px 10px 4px #000203;
        }
        
        /* Light mode hover state */
        .close-label:hover {
          background: linear-gradient(135deg, #dfe3ee, #ffffff);
          box-shadow: 0px 1px 10px 2px #ffffff, 0px 0px 12px 4px #dfe3ee;
        }
        
        /* Dark mode hover state */
        .close-label.close-dark-mode:hover {
          background: linear-gradient(135deg, #000203, #212121);
          box-shadow: 0px 1px 10px 2px #212121, 0px 0px 12px 4px #000203;
        }
      `}</style>
    </div>
  );
});

PortalCloseButton.displayName = 'PortalCloseButton';

export default PortalCloseButton;